<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" data-href="html/list1.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">音乐列表</span>
        </a>
        <a class="mui-tab-item" data-href="html/list2.html">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">新闻列表</span>
        </a>
        <a class="mui-tab-item" data-href="html/list3.html">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">个人中心</span>
        </a>
    </nav>
    
    
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init();
    	
    	mui.plusReady(function() {
    		// 先定义好子页面
    		var subpages = ['html/list1.html', 'html/list2.html', 'html/list3.html'];
    		
    		// 子页面样式
    		var subpages_style = {
    			top: 0,
    			bottom: '51px'
    		};
    		
    		// 获取一下当前页面的webview对象
    		var self = plus.webview.currentWebview();
    		
    		// 创建子页面
    		for (var i = 0; i < subpages.length; i++) {
    			var sub = plus.webview.create(subpages[i], subpages[i], subpages_style);
    			
    			if (i > 0) {
    				sub.hide();
    			}
    			
    			self.append(sub);
    		}
    		
    		// 处于激活状态的页面
    		var activeTab = subpages[0];
    		
    		// 给选项卡绑定tap事件
    		mui('.mui-bar-tab').on('tap', 'a', function() {
    			// 获取一个目标页面
    			var targetTab = this.getAttribute('data-href');
    			
    			if (targetTab == activeTab) {
    				return;
    			}
    			
    			plus.webview.show(targetTab);
    			plus.webview.hide(activeTab);
    			
    			activeTab = targetTab;
    			
    		})
    	})
    </script>
</body>
</html>
